<template>
  <div class="content content2">
    <div class="left">
      <div class="top">
        <div class="title">库区选择</div>
        <el-select v-model="value" placeholder="" class="seleW" value-key="id" @change="change">
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </div>
      <div class="view-content">
        <el-input v-model="input" placeholder="请输入库区的名称" suffix-icon="el-icon-search" class="ipt" @input="inputSearch" />
        <div v-if="detailList.length" class="detail">
          <div
            v-for="item in detailList"
            :key="item.id"
            class="item"
            :class="selItem.id === item.id ? 'itemActive' : ''"
            @click="selFn(item)"
          >{{ item.name }}</div>
        </div>
        <div v-else class="areaEmpty">
          <p>暂无库区</p>
          <el-button class="importantButton" @click="$router.push({name:'area-details', params: {id:'null'}})">新增库位</el-button>
        </div>
      </div>
    </div>
    <div class="mm" />
    <div class="right">
      <div class="top">
        <div class="title">库区总览</div>
        <div class="detail">
          <div class="item">库存总计：<span>{{ overviewDetail? overviewDetail.total:0 }}</span></div>
          <div class="item"><i class="stop" />停用库位：<span>{{ overviewDetail? overviewDetail.stop :0 }}</span></div>
          <div class="item"><i class="use" />占用库位：<span>{{ overviewDetail? overviewDetail.use :0 }}</span></div>
          <div class="item"><i class="free" />空闲库位：<span>{{ overviewDetail? overviewDetail.free :0 }}</span></div>
        </div>
      </div>
      <div v-if="locationDetail.length" class="content-view">
        <el-popover
          v-for="item in locationDetail"
          :key="item.id"
          placement="bottom"
          min-width="10"
          trigger="hover"
        >
          <div><span class="title">库位编号：</span>{{ item.code }}</div>
          <div><span class="title">库位名称：</span>{{ item.name }}</div>
          <div><span class="title">库位位置：</span>{{ item.location }}</div>
          <div><span class="title">库位状态：</span>{{ item.useStatus }}</div>
          <div><span class="title">货品名称：</span>{{ item.goodsName }}</div>
          <div><span class="title">货品数量：</span>{{ item.goodsTotal }}</div>
          <span slot="reference" class="box" :class="item.useStatus==='空闲'?'':'boxActive'" />
        </el-popover>
      </div>
      <div v-else class="empty">
        <img src="@/assets/images/empty.png" alt="">
        <p>暂无库位</p>
        <el-button class="importantButton" @click="$router.push({name:'location-details', params: {id:'null'}})">新增库位</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { warehouseList, areaList, overviewDetail, locationList } from '@/api'
export default {
  data() {
    return {
      value: '',
      input: '',
      options: [],
      detailList: [],
      selItem: {},
      overviewDetail: null,
      locationDetail: []
    }
  },
  async created() {
    const res = await warehouseList({ status: 1 })
    this.options = res.data.data
    this.value = this.options[0].id
    await this.detail()
    this.selItem = this.detailList[0]
    await this.overview(this.selItem.id)
    // console.log(this.locationDetail)
  },
  methods: {
    // left
    async detail() {
      const res1 = await areaList({ warehouseId: this.value, status: 1 })
      this.detailList = res1.data.data
    },
    // right
    async overview(id) {
      const res = await overviewDetail(id)
      const res1 = await locationList({ areaId: id })
      this.overviewDetail = res.data.data
      this.locationDetail = res1.data.data
      console.log(this.locationDetail)
      this.locationDetail.forEach(item => {
        if (item.useStatus === 0) {
          item.useStatus = '空闲'
        } else if (item.useStatus === 1) {
          item.useStatus = '未满'
        } else {
          item.useStatus = '已满'
        }
        item.location = `${item.locationRow ? item.locationRow : '-'}排${item.locationColumn ? item.locationColumn : '-'}列${item.locationLayer ? item.locationLayer : '-'}层`
      })
    },
    async change() {
      await this.detail()
      if (!this.detailList.length) return
      this.selItem = this.detailList[0]
      await this.overview(this.selItem.id)
    },
    async selFn(item) {
      this.selItem = item
      await this.overview(this.selItem.id)
    },
    async inputSearch() {
      const res = await areaList({ warehouseId: this.value, like_name: this.input, status: 1 })
      this.detailList = res.data.data
      this.selItem = this.detailList[0]
      await this.overview(this.selItem.id)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/location-view.scss';
@import '~@/styles/common.scss';
</style>
